<template>
  <view class="question-bank-container">
    <view class="comm-bootom-shadow">
      <view class="search-wrap">
        <view class="search-content">
          <view class="search-input-box no-base-sport">
            <input type="text" v-model="searchParams.name" class="search-input" placeholder="输入题库名称" placeholder-style="color: #999" />
          </view>
          <view class="search-btn" @click="changeSearch">搜索</view>
        </view>
      </view>
    </view>
    <scroll-view
      class="question-bank-list"
      scroll-y="true"
      :refresher-enabled="true"
      @refresherrefresh="refresherrefresh"
      @refresherpulling="refresherpulling"
      :refresher-triggered="triggered"
      @scrolltolower="scrolltolower"
      :lower-threshold="30"
    >
      <template v-if="questionSetList.length > 0">
        <view class="question-bank-item common-card" v-for="(item, index) in questionSetList" @click="goQuestionSetDetails(item.id)" :key="index">
          <view class="question-bank-name">
            <view>题库名称：</view>
            <view>{{ item.name }}</view>
          </view>
          <view class="question-bank-desc" v-if="item.description">
            <view>描述：</view>
            <view>{{ item.description }}</view>
          </view>
          <view class="flex-center">
            <view>题目数量：{{ item.questionCount }}</view>
            <view>创建时间：{{ item.createTime }}</view>
          </view>
        </view>
      </template>
      <Empty v-if="questionSetList.length == 0 && !isLoading"></Empty>
      <Loading v-if="isLoading"></Loading>
    </scroll-view>
    <!-- 添加题库按钮 -->
    <view class="add-btn" @click="goAddQuestionSet">
      <uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
    </view>
  </view>
</template>

<script setup>
import Loading from "@/components/Loading/index.vue";
import Empty from "@/components/Empty/index.vue";
import { reactive, ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { getQuestionSetList } from "@/api/questionSet";
import { useUserStore } from "@/store/user";

const user = useUserStore();

const searchParams = reactive({
  pageSize: 10,
  page: 1,
  name: "",
  userId: user.profile.userId,
});

const triggered = ref(false);
const isLoading = ref(false);
const refresherpulling = () => {
  triggered.value = true;
};
const refresherrefresh = async () => {
  //下拉刷新
  changeSearch();
  triggered.value = false;
};
const scrolltolower = () => {
  if (listTotal.value > questionSetList.value.length) {
    searchParams.page += 1;
    getList();
  }
};

// 搜索
const changeSearch = () => {
  questionSetList.value = [];
  searchParams.page = 1;
  getList();
};

const questionSetList = ref([]);
const listTotal = ref(0);

// 获取列表
const getList = async () => {
  isLoading.value = true;
  try {
    const res = await getQuestionSetList(searchParams);
    listTotal.value = res.total;
    questionSetList.value = [...questionSetList.value, ...res.list];
  } catch (e) {
    console.error("获取题库列表失败:", e);
    uni.showToast({
      title: "获取题库列表失败",
      icon: "none",
    });
  } finally {
    isLoading.value = false;
  }
};

// 跳转题库详情
const goQuestionSetDetails = (id) => {
  uni.navigateTo({
    url: `/subPackages/home/questionSet/detail?id=${id}`,
  });
};

// 跳转添加题库
const goAddQuestionSet = () => {
  uni.navigateTo({
    url: `/subPackages/home/questionSet/add`,
  });
};

onShow(() => {
  changeSearch();
});
</script>

<style lang="scss" scoped>
.question-bank-container {
  width: 100%;
  background-color: $uni-primary-bg;
  height: 100vh;
  position: relative;

  .search-wrap {
    padding-top: 10rpx;
  }
}

.question-bank-list {
  height: calc(100% - 90rpx);
  padding: 20rpx 20rpx 20rpx;
  box-sizing: border-box;

  .question-bank-item {
    padding: 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;

    & > view {
      margin-bottom: 10rpx;
    }

    .question-bank-name {
      display: flex;

      & > view:first-child {
        width: 150rpx;
      }

      & > view:last-child {
        flex: 1;
        font-weight: bold;
      }
    }

    .question-bank-desc {
      display: flex;

      & > view:first-child {
        width: 150rpx;
      }

      & > view:last-child {
        flex: 1;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}

.flex-center {
  display: flex;
  align-items: center;

  & > view {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  & > view:last-child {
    flex: 2;
  }
}

.add-btn {
  position: fixed;
  right: 30rpx;
  bottom: 100rpx;
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background-color: $uni-primary;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
  z-index: 10;
}
</style>
